<template>
  <!-- 标题 -->
  <van-nav-bar title="确认订单" left-arrow @click-left="onClickLeft" />
  <!-- 地址 -->
  <van-cell is-link :title="choseAdd" @click="show = !show" />
  <!-- 配送方式 -->
  <van-nav-bar left-text="配送方式" right-text="快递" />
  <!-- 内容 -->
  <van-card
    v-for="item in orderList"
    :key="item.imgURL[0]"
    :num="item.productNum"
    :price="item.currentPrice"
    :desc="item.title"
    :title="item.productName"
    :thumb="item.imgURL[0]"
  />

  <!-- 遮罩层 -->
  <van-address-edit
    :area-list="areaList"
    show-postal
    show-set-default
    show-search-result
    :search-result="searchResult"
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    @save="onSave"
    @change-detail="onChangeDetail"
    v-show="show"
  />
  <!-- 优惠券单元格 -->
  <van-coupon-cell
    :coupons="state.coupons"
    :chosen-coupon="state.chosenCoupon"
    @click="state.showList = true"
  />
  <!-- 优惠券列表 -->
  <van-popup
    v-model:show="state.showList"
    round
    position="bottom"
    style="height: 90%; padding-top: 4px"
  >
    <van-coupon-list
      :coupons="state.coupons"
      :chosen-coupon="state.chosenCoupon"
      :disabled-coupons="disabledCoupons"
      @change="onChange"
      @exchange="onExchange"
    />
  </van-popup>
  <!-- 卖家留言 -->
  <van-cell-group inset>
    <van-field
      v-model="value"
      label="卖家留言"
      placeholder="留言建议提前协商(250字以内)"
    />
  </van-cell-group>
  <!-- 温馨提示 -->
  <div class="help">
    提交订单则表示你同意 <span>《用户协议》</span>和<span>《隐私政策》</span>
  </div>
  <!-- 底部 -->
  <van-submit-bar
    :price="orderSum * 100"
    button-text="提交订单"
    @submit="onSubmit"
  />
</template>

<script>
import { postUpdateCartListApi, postUpdateOrderListApi } from "@/utils/api";
import { reactive, ref } from "vue";
// import { Toast } from "vant";
import { mapState, mapMutations } from "vuex";
//引用$router和$route
import { useRouter } from "vue-router";

export default {
  setup() {
    const choseAdd = ref("请选择地址");
    // 创建路由信息实例
    const router = useRouter();
    // const route = useRoute();
    const onClickLeft = () => {
      router.go(-1);
    };
    const orderList = reactive([]);
    const value = ref("");
    const areaList = {
      province_list: {
        110000: "北京市",
        120000: "天津市",
      },
      city_list: {
        110100: "北京市",
        120100: "天津市",
      },
      county_list: {
        110101: "东城区",
        110102: "西城区",
        // ....
      },
    };
    const searchResult = ref([]);
    const show = ref(false);
    const onSave = () => {
      show.value = !show.value;
      choseAdd.value =
        searchResult.value[0].address + searchResult.value[0].name;
    };
    const onChangeDetail = (val) => {
      if (val) {
        searchResult.value = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        searchResult.value = [];
      }
    };
    // 优惠券
    const coupon = {
      available: 1,
      condition: "无使用门槛\n最多优惠12元",
      reason: "",
      value: 150,
      name: "优惠券名称",
      startAt: 1489104000,
      endAt: 1514592000,
      valueDesc: "1.5",
      unitDesc: "元",
    };
    const state = reactive({
      coupons: [coupon],

      showList: false,
      chosenCoupon: -1,
    });
    const onChange = (index) => {
      state.showList = false;
      state.chosenCoupon = index;
    };
    const onExchange = (code) => {
      console.log(code);
      state.coupons.push(coupon);
    };
    return {
      areaList,
      onSave,
      searchResult,
      onChangeDetail,
      show,
      coupon,
      state,
      onChange,
      onExchange,
      disabledCoupons: [coupon],
      // onSubmit,
      choseAdd,
      value,
      orderList,
      router,
      onClickLeft,
    };
  },
  computed: {
    //计算订单总额
    orderSum() {
      let sum = 0;
      this.orderList.forEach((val) => {
        sum += val.currentPrice * val.productNum;
      });
      return sum;
    },
    ...mapState("cart", ["cartList", "cartDetailList"]),
  },
  methods: {
    ...mapMutations("cart", ["deleteCartDetailList"]),
    // 提交订单
    async onSubmit() {
      // console.log(this.orderList);
      //更行购物车数据库
      await this.deleteCartDetailList({ list: this.orderList });
      await postUpdateCartListApi({
        uid: localStorage.getItem("userid"),
        carr: this.cartList,
      });
      // console.log(this.orderList);
      //创建订单数组
      let arr = this.orderList.map((val) => {
        return {
          productId: val.productId,
          productNum: val.productNum,
        };
      });
      //更新订单数据
      await postUpdateOrderListApi({
        uid: localStorage.getItem("userid"),
        plist: arr,
      });
      //跳转到购物车页面
      this.router.push({ path: "/cart" });
    },
  },
  created() {
    // console.log(this.cartDetailList);
    // 获取购物车选中商品
    this.orderList = this.cartDetailList.filter((val) => {
      if (val.pChecked) {
        return val;
      }
    });
    // console.log(this.orderList);
  },
};
</script>

<style lang="less">
.van-nav-bar .van-icon {
  color: black;
}
// 配送方式
.van-nav-bar__text {
  color: black;
}
//内容
.van-card {
  background: white;
}
.van-address-edit {
  height: 100%;
  width: 100%;
  z-index: 99;
  position: absolute;
  top: 0px;
  background: white;
}
// 优惠券
.van-cell {
  margin-top: 6px;
}
// 卖家留言

.van-cell-group {
  margin: 0 !important;
  margin-top: 8px !important;
}
.van-field__control {
  font-size: 14px;
}
// 温馨提示
.help {
  font-size: 13px;
  text-align: center;
  margin-top: 10px;
  span {
    color: rgb(122, 122, 236);
  }
}
</style>
